<template>
	<view class="bg">
		<xl-navbar title="Input输入框" fixed shadow></xl-navbar>
		<view class="title">基础样式：线样式line</view>
		<xl-input v-model="inputValue"></xl-input>
		<view class="title">密码类型、右侧密码类型</view>
		<xl-input v-model="inputValue" type="password" rightType="password"></xl-input>
		<view class="title">数字类型：</view>
		<xl-input v-model="inputValue" type="number"></xl-input>
		<view class="title">必填：required、最长长度：maxlength</view>
		<xl-input v-model="inputValue" required maxlength="10"></xl-input>
		<view class="title">禁用状态：</view>
		<xl-input v-model="inputValue" disabled margin="20"></xl-input>
		<view class="title">盒子样式：round圆形，square方形，可加阴影</view>
		<xl-input v-model="inputValue" shape="round" margin="20"></xl-input>
		<xl-input v-model="inputValue" shape="square" margin="20"></xl-input>
		<xl-input v-model="inputValue" shape="round" margin="20" shadow></xl-input>
		<xl-input v-model="inputValue" shape="square" margin="20" shadow></xl-input>
		<view class="title">左图标：</view>
		<xl-input v-model="inputValue" leftIcon="xl-tel"></xl-input>
		<view class="title">左文本：</view>
		<xl-input v-model="inputValue" leftLabel="+86"></xl-input>
		<view class="title">右侧请求验证码：默认60秒、获取验证码</view>
		<xl-input v-model="inputValue" rightType="code" :codeTime="60" codeText="获取验证码" @getCode="getCode"></xl-input>
		<view class="title">右侧图片验证码：</view>
		<xl-input v-model="inputValue" rightType="img" imgSrc="/static/imgs/pic.png" @changeImage="changeImage"></xl-input>
		<view class="title">右侧图标：</view>
		<xl-input v-model="inputValue" rightType="icon" rightIcon="xl-tel" @clickRightIcon="clickRightIcon"></xl-input>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const inputValue = ref("")
	
	function getCode(countDown){
		uni.$xl.toast("请求手机验证码")
		// 开始请求后，执行countDown方法倒计时
		countDown()
	}
	
	function changeImage(){
		uni.$xl.toast("点击图片验证码，切换验证码图片")
	}
	
	function clickRightIcon(){
		uni.$xl.toast("点击右侧图标")
	}
</script>
